<template>
	<view class="cinfo">
		<view class="card">
			<view class="info">
				<view class="logo">
					<image :src="info.thumb"></image>
				</view>
				<view class="content">
					<view>{{info.supname}}</view>
					<view class="little">剩余次数：{{info.checknum}}次</view>
				</view>
				<view class="status effective" v-if="info.status==1">有效</view>
				<view class="status expire" v-if="info.status==-1">过期</view>
			</view>
			<view class="content">
				<view class="title">{{info.title}}</view>
				<view>价格：¥{{info.price}}/{{info.num}}次</view>
				<view>单次：¥{{formattedPrice}}</view>
			</view>
			<view class="date">
				<view>购买日期：{{info.createtime}}</view>
				<view>购买金额：¥{{info.price}}</view>
			</view>
		</view>
		<view class="ma_list">
			<view class="ma" v-for="item in list">
				<view class="al_ma">
					<view>{{item.statusstr}}</view>
					<view>使用有效期: {{item.endtime}}</view>
					<view v-if="item.status==1">核销日期: {{item.checktime}}</view>
					<view v-else>核销日期: -</view>
				</view>
				<view class="ewm">
					<image :src="item.code" @click="prevImage(item.code)"></image>
					<view class="mask" v-if="info.status==-1">已过期</view>
					<view class="mask" v-if="info.status==1&&item.status!=0">{{item.statusstr}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				imgs: [],
				id: '',
				info:[]
			};
		},
		onLoad(option){
			this.id = option.id;
			this.getInfo();
			this.getDetailList();
		},
		computed: {
		  formattedPrice() {
		    return parseFloat((this.info.price/this.info.num).toFixed(2))
		  }
		},
		methods: {
			getInfo(){
				this.$axios('card/info','POST','order',{
					id: this.id
				}).then(res=>{
					if(res.data.code==200){
						this.info = res.data.data;
						uni.setNavigationBarTitle({
							title: res.data.data.supname
						})
					}
				})
			},
			getDetailList(){
				this.$axios('card/detail','POST','order',{
					id: this.id
				}).then(res=>{
					if(res.data.code==200){
						this.list = res.data.data;
					}
				})
			},
			prevImage(url) {
				let arr = [];
				arr[0] = url;
				uni.previewImage({
					current: 0,
					urls:  arr
				})
			},
		}
	}
</script>

<style lang="scss">
	.cinfo{
		padding: 20rpx;
		.card{
			padding: 30rpx;
			width: 100%;
			height: 450rpx;
			border-radius: 20rpx;
			background-size: 100% 100%;
			font-size: 32rpx;
			position: relative;
			box-shadow: 0 0 29rpx -7rpx black;
			color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background-image: url('https://img.jinghushi.com/images/9/2024/01/xy4Je4dyddYdJRAayJy5UJ54RIZHYD.jpg');
			.date{
				display: flex;
				justify-content: space-between;
				color: #fff;
				font-size: 24rpx;
			}
			.content{
				line-height: 1.8;
				font-size: 28rpx;
				.title{
					font-size: 32rpx;
				}
			}
			.status{
				padding: 5rpx 10rpx;
				color: #fff;
				font-size: 24rpx;
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				border-radius: 8rpx;
				opacity: 0.9;
			}
			.effective{
				background: #17a362;
			}
			.expire{
				background: #aa0000;
			}
			.info{
				display: flex;
				color:#fff;
				align-items: center;
				.logo{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 20rpx;
					border: 4rpx solid #fff;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.content{
					flex: 1;
				}
				.little{
					color: #c5c2c2;
					font-size: 28rpx;
				}
			}
		}
		.ma_list{
			margin-top: 25rpx;
			.ma{
				width: 100%;
				position: relative;
				margin-bottom: 25rpx;
				box-shadow: 4rpx 7rpx 16rpx 7rpx #cec9c9;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx;
				.ewm{
					width: 200rpx;
					height: 200rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
					}
					.mask{
						position: absolute;
						width: 100%;
						height: 100%;
						background: rgba(255,255,255,.8);
						text-align: center;
						display: flex;
						flex-direction: column;
						justify-content: center;
						top: 0;
						font-weight: bold;
					}
				}
			}
			.al_ma{
				text-align: center;
				font-weight: bold;
				color: #333;
				flex: 1;
				line-height: 2;
			}
		}
	}
</style>
